<template>
    <div>

        <template>
        <el-table
                :data="tableData"
                style="width: 100%">


            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">

                        <!--套娃-->
                        <el-table
                                :data="props.row.orderVos"
                                style="width: 100%">

                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">

                                        <el-form-item label="商品单价">
                                            <span>{{ props.row.salePrice }}</span>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <span>{{ props.row.colorName}}</span>
                                        </el-form-item>
                                        <el-form-item label="购买人">
                                            <span>{{ props.row.userName }}</span>
                                        </el-form-item>

                                        <el-form-item label="型号">
                                            <span>{{ props.row.sizeName}}</span>
                                        </el-form-item>
                                        <el-form-item label="收货人">
                                            <span>{{ props.row.receiverName }}</span>
                                        </el-form-item>
                                        <el-form-item label="口味">
                                            <span>{{ props.row.tasteName}}</span>
                                        </el-form-item>


                                        <el-form-item label="收货人手机号">
                                            <span>{{ props.row.receiverPhone }}</span>
                                        </el-form-item>
                                        <el-form-item label="商品描述">
                                            <span>{{ props.row.description }}</span>
                                        </el-form-item>
                                        <el-form-item label="收货地址">
                                            <span>{{ props.row.area }}-{{ props.row.itemAddress }}</span>
                                        </el-form-item>

                                    </el-form>
                                </template>
                            </el-table-column>


                            <el-table-column
                                    label="订单明细ID"
                                    prop="orderItemId">
                            </el-table-column>
                            <el-table-column
                                    label="商品名"
                                    prop="goodsName">
                            </el-table-column>
                            <el-table-column
                                    label="购买量"
                                    prop="buyCount">
                            </el-table-column>
                            <el-table-column
                                    label="总价"
                                    prop="allPrice">
                            </el-table-column>




                        </el-table>



                        <!--套娃-->

                    </el-form>
                </template>
            </el-table-column>



            <el-table-column
                    label="订单id"
                    prop="orderId">
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    prop="orderNum">
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    label="总价"
                    prop="totalPrice">
            </el-table-column>
            <el-table-column
                    label="订单状态"
                    prop="orderStatus">
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template slot-scope="scope"  >
                    <el-button @click="changeStatus(scope.row.orderId)"  size="small">去发货</el-button>
                </template>
            </el-table-column>

        </el-table>
        </template>


    </div>

</template>

<script>
    export default {
        data() {
            return {
                tableData: {},

            }
        },methods:{
            changeStatus(id){

                let url=this.$baseUrl+"/order/update?id="+id
                this.axios.put(url).then((data)=>{
                    if (data.data.code==200){
                        this.$message.success(data.data.message)
                    }else {
                        this.$message.error(data.data.message)
                    }
                    this.findAll()
                })
            },
            findAll(){
                let url=this.$baseUrl+"/order/findAll"
                this.axios.get(url,{}).then((data)=>{
                    this.tableData=data.data.data;
                    console.log(this.tableData)

                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].orderStatus = this.tableData[i].orderStatus==1?"已发货":(this.tableData[i].orderStatus==0?"等待发货":"买家已收货");
                    }
                })

            },

        }
        ,created(){
            this.findAll()
        }
    }
</script>


<style scoped>

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }


</style>